<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/WEB-INF/layout/template.xhtml">
    <ui:define name="metadata">
        <f:metadata>
            <f:viewParam name="id" value="#{editTaskAction.taskId}">
                <!--                <f:validateRequired></f:validateRequired>-->
            </f:viewParam>
            <f:viewAction action="#{editTaskAction.init()}" />
        </f:metadata>
    </ui:define>
    <ui:define name="pageTitle"> 
        <ui:fragment rendered="#{empty editTaskAction.taskId}">ADD TASK</ui:fragment>
        <ui:fragment rendered="#{empty editTaskAction.taskId}">EDIT TASK (ID: #{editTaskAction.task.id}, STATUS: #{editTaskAction.task.status})</ui:fragment>
    </ui:define>
    <ui:define name="content">
        <div class="row">
            <div class="col-md-12">
                <h:form id="form" role="form" class="form">
                    <div class="form-group">
                        <label class="text-uppercase" jsf:for="name">Task Name:</label>
                        <input type="text" 
                               jsf:id="name" 							
                               class="form-control #{not empty facesContext.getMessageList('form:name')?'is-invalid':''}" 
                               jsf:value="#{editTaskAction.task.name}"
                               jsf:required="true" 
                               jsf:requiredMessage="Task name is required."
                               placeholder="Type task name here...">
                        </input>
                        <small class="invalid-feedback">
                            <h:message for="name" showDetail="false" showSummary="true" />
                        </small>
                    </div>
                    <div
                        class="form-group">
                        <label class="text-uppercase" jsf:for="description">Task Description:</label>
                        <textarea jsf:id="description" 
                                  class="form-control #{not empty facesContext.getMessageList('form:description')?'is-invalid':''}" 
                                  rows="8"
                                  jsf:value="#{editTaskAction.task.description}" 
                                  jsf:required="true"
                                  jsf:requiredMessage="Description is required."
                                  placeholder="Describe the task content here..." />
                        <small class="invalid-feedback">
                            <h:message for="description" showDetail="false"
                                       showSummary="true" />
                        </small>
                    </div>

                    <div class="form-group">
                        <h:commandButton id="submitTask" type="submit"
                                         styleClass="btn btn-lg btn-primary"
                                         action="#{editTaskAction.save()}" value="Add Task"></h:commandButton>
                    </div>
                </h:form>
            </div>
        </div>
    </ui:define>
</ui:composition>
